import React, { Component } from 'react'
import styles from './../Register/Register.module.scss'

export default class ModifyPwd extends Component {
  constructor(props) {
    super(props)
    this.state = {
      pwd: '',
      comfigPwd: '',
    }
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleSubmit(event) {
    console.log(this.state)
    event.preventDefault();
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }


  render() {
    return (
      <div className={styles.register}>
        <div className={styles.title}>
          <span style={{ letterSpacing: '2px' }}>修改密码</span>
        </div>
        <div className={styles.register_content}>
          <div className={styles.message}>用户名或密码错误，请重新输入</div>
          <form className={styles.form} onSubmit={this.handleSubmit}>
            <div className={styles.form_item}>
              <span>密码<em>*</em></span>
              <input 
                name="pwd" 
                required="required"
                value={this.state.pwd}
                type="password" 
                placeholder="请输入密码" 
                onChange={this.handleInputChange}
              />
            </div>
            <div className={styles.form_item}>
              <span>确认密码<em>*</em></span>
              <input 
                name="comfigPwd" 
                required="required"
                value={this.state.comfigPwd}
                type="password" 
                placeholder="请确认密码"
                onChange={this.handleInputChange}
              />
            </div>
            <div className={styles.form_item}>
              <button type="submit">修改</button>
            </div>
          </form>
        </div>
      </div>
    )
  }
}
